﻿<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>专题制作插件</title>
</head>

<body style="padding:0;margin:0;">

	<div id="productHelper">
		<div v-if="!exporting">
			<div id="setOption" v-if="!mainOptions.optionSubmit">
				产品型号(英文):<input type="text" v-model="mainOptions.productName" />
				图片后缀:<input type="text" v-model="mainOptions.imageExtension" />
				设计稿宽度:<input type="number" v-model="mainOptions.UIWidth" step="1" @mousewheel="" />
				切图页数:<input type="number" v-model="mainOptions.pageNumber" step="1" min="1" max="99" @mousewheel="" />
				产生滚动条的宽度:<input type="number" v-model="mainOptions.minWidth" step="1" min="0" @mousewheel="" />
				<button @click="submitMainOptions()">选项确认</button>
			</div>

			<div id="fontStandard">
				<div v-for="(option,index) in presetPOptions" :key="option.id">
					<span>预设格式{{index+1}}:</span>
					<input type="number" v-model="option.fontSize" step="1" min="12" placeholder="字体大小px"
						@mousewheel="" />
					<input type="number" v-model="option.lineHeight" step="1" min="12" placeholder="行高px"
						@mousewheel="" />
					<input type="text" v-model="option.color" placeholder="颜色" minlength="6" maxlength="6" />
					<select v-model="option.fontWeight">
						<option v-for="weight in quickFontWeight" :key="weight" :value="weight">{{weight}}</option>
					</select>
					<select v-model="option.fontFamily">
						<option v-for="font in globalFontFamily" :key="font" :value="font">{{font}}</option>
					</select>
					<br>
				</div>
			</div>

			<div :id="mainOptions.productName+'-main'" style="width:100%;overflow:hidden;" ref="html">
				<v-style>{{getGlobalStyle}}</v-style>
				<div class="block" v-for="block in mainContent" :key="block.id">
					<div class="helper"
						style="position:absolute;z-index:2;top:0px;left:0px;width:310px;font-family:Microsoft YaHei"
						:style="'color:'+(globalDarkTheme?'#000000':'#ffffff')" ref="helper">
						<button @click="block.helper.helperFold = !block.helper.helperFold">显示/隐藏控件</button>
                        <button @click="globalDarkTheme=!globalDarkTheme">深浅</button>
                        <button @click="globalLeftRight=!globalLeftRight">左右</button>
						<div v-show="!block.helper.helperFold">
							<button v-for="standard in presetPOptions" :key="standard.id"
								@click="currentPresetOptionId = standard.id">使用p格式{{standard.id}}</button>
							<br />
							<button style="margin-right: 5px;" @click="addP(block)">addp</button>
							<button style="margin-right: 5px;" @click="addA(block)">addLink</button>
							<button @click="addVideo(block)">addVideo</button>
							<br />
							<button style="margin-right: 5px;" @click="removeAll(block,'p')">remove-p</button>
							<button style="margin-right: 5px;" @click="removeAll(block,'a')">remove-link</button>
							<button @click="removeAll(block,'video')">remove-video</button>
							<textarea style="margin: 0px;height: 60px;width: 285px;"
								placeholder="全局颜色">{{getGlobalColor}}</textarea>
							<div v-if="block.helper.currentIndex.p != -1">
								<div>
									大小/行高/间距:
									<input style="width:50px;" type="number"
										v-model="block.view.p[block.helper.currentIndex.p].fontSize" step="1" min="12"
										@mousewheel="" />
									<input style="width:50px;" type="number"
										v-model="block.view.p[block.helper.currentIndex.p].lineHeight" step="1" min="12"
										@mousewheel="" />
									<input style="width:50px;" type="number"
										v-model="block.view.p[block.helper.currentIndex.p].letterSpacing" step="1"
										min="0" @mousewheel="" />
								</div>
								<div>
									颜色:
									<input style="width:50px;" type="text"
										v-model="block.view.p[block.helper.currentIndex.p].color"
										@change="addGlobalColor(block.view.p[block.helper.currentIndex.p].color)" />
									快捷颜色:
									<select
										@change="block.view.p[block.helper.currentIndex.p].color = $event.target.value">
										<option value="000000">默认000</option>
										<option v-for="quick in quickColor" :key="quick" :value="quick">{{quick}}
										</option>
									</select>
								</div>
								<div>
									<select style="width:300px;"
										v-model="block.view.p[block.helper.currentIndex.p].fontFamily">
										<option v-for="font in globalFontFamily" :key="font" :value="font">{{font}}
										</option>
									</select>
								</div>
								<div>
									粗细:
									<select v-model="block.view.p[block.helper.currentIndex.p].fontWeight">
										<option v-for="weight in quickFontWeight" :key="weight" :value="weight">
											{{weight}}</option>
									</select>
									对齐:
									<select v-model="block.view.p[block.helper.currentIndex.p].textAlign">
										<option value="left">默认left</option>
										<option value="left">left</option>
										<option value="right">right</option>
										<option value="center">center</option>
                                        <option value="centerScreen">centerScreen</option>
									</select>
								</div>
								<div>
									<textarea style="margin: 0px;height: 60px;width: 285px;"
										v-model="block.view.p[block.helper.currentIndex.p].content"
										@input="updateHTMLContent(block.view.p[block.helper.currentIndex.p])"
										placeholder="文本内容"></textarea>
								</div>
								<div>
									<input class="positionP" style="width:200px;" type="text"
										@keydown="changePosition($event,block.view.p[block.helper.currentIndex.p])"
										placeholder="awds,fthg,jilk,上下左右控制方向" />
									<button @click="deleteCurrent(block,block.helper.currentIndex.p,'p')">删除当前P</button>
								</div>
							</div>
							<div v-if="block.helper.currentIndex.a != -1">
								<div>
									大小/行高/间距:
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].fontSize" step="1" min="12"
										@mousewheel="" />
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].lineHeight" step="1" min="12"
										@mousewheel="" />
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].letterSpacing" step="1"
										min="0" @mousewheel="" />
								</div>
								<div>
									颜色:
									<input style="width:50px;" type="text"
										v-model="block.view.a[block.helper.currentIndex.a].color"
										@change="addGlobalColor(block.view.a[block.helper.currentIndex.a].color)" />
									快捷颜色:
									<select
										@change="block.view.a[block.helper.currentIndex.a].color = $event.target.value">
										<option value="000000">默认000</option>
										<option v-for="quick in quickColor" :key="quick" :value="quick">{{quick}}
										</option>
									</select>
								</div>
								<div>
									<select style="width:300px;"
										v-model="block.view.a[block.helper.currentIndex.a].fontFamily">
										<option v-for="font in globalFontFamily" :key="font" :value="font">{{font}}
										</option>
									</select>
								</div>
								<div>
									粗细:
									<select v-model="block.view.a[block.helper.currentIndex.a].fontWeight">
										<option v-for="weight in quickFontWeight" :key="weight" :value="weight">
											{{weight}}</option>
									</select>
									对齐:
									<select v-model="block.view.a[block.helper.currentIndex.a].textAlign">
										<option value="left">默认left</option>
										<option value="left">left</option>
										<option value="right">right</option>
										<option value="center">center</option>
                                        <option value="centerScreen">centerScreen</option>
									</select>
								</div>
								<div>
									href:
									<input style="width:250px;" type="text"
										v-model="block.view.a[block.helper.currentIndex.a].href" />
								</div>
								<div>
									宽高:
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].width" step="0.1" min="0"
										@mousewheel="" />
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].height" step="0.1" min="0"
										@mousewheel="" />
									<button
										@click="block.view.a[block.helper.currentIndex.a].borderRadiusPercent=block.view.a[block.helper.currentIndex.a].borderRadiusVW=0">重置圆度</button>
								</div>
								<div>
									圆度%:
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].borderRadiusPercent"
										step="0.1" min="0" @mousewheel="" />
									圆度vw(优先):
									<input style="width:50px;" type="number"
										v-model="block.view.a[block.helper.currentIndex.a].borderRadiusVW" step="0.1"
										min="0" @mousewheel="" />
								</div>
								<div>
									target:
									<select
										@change="block.view.a[block.helper.currentIndex.a].target = $event.target.value">
										<option value="_blank">默认_blank</option>
										<option value="_blank">_blank</option>
										<option value="_self">_self</option>
									</select>
									边框颜色:
									<select
										@change="block.view.a[block.helper.currentIndex.a].borderColor = $event.target.value">
										<option value="">默认空</option>
										<option v-for="quick in quickColor" :key="quick" :value="quick">{{quick}}
										</option>
									</select>
								</div>
								<div>
									<textarea style="margin: 0px;height: 60px;width: 285px;"
										v-model="block.view.a[block.helper.currentIndex.a].content"
										@input="updateHTMLContent(block.view.a[block.helper.currentIndex.a])"
										placeholder="文本内容"></textarea>
								</div>
								<div>
									<input class="positionA" style="width:200px;" type="text"
										@keydown="changePosition($event,block.view.a[block.helper.currentIndex.a])"
										placeholder="awds,fthg,jilk,上下左右控制方向" />
									<button @click="deleteCurrent(block,block.helper.currentIndex.a,'a')">删除当前A</button>
								</div>
							</div>
							<div v-if="block.helper.currentIndex.video != -1">
								<div>
									宽:
									<input style="width:50px;" type="number"
										v-model="block.view.video[block.helper.currentIndex.video].width" step="0.1"
										min="0" @mousewheel="" />
									type:
									<input style="width:100px;" type="text"
										v-model="block.view.video[block.helper.currentIndex.video].type" />
								</div>
								<div>
									src:
									<input style="width:250px;" type="text"
										v-model="block.view.video[block.helper.currentIndex.video].src" />
								</div>
								<div>
									<button
										@click="block.view.video[block.helper.currentIndex.video].center=!block.view.video[block.helper.currentIndex.video].center">center:{{block.view.video[block.helper.currentIndex.video].center}}</button>
									<button
										@click="block.view.video[block.helper.currentIndex.video].autoplay=!block.view.video[block.helper.currentIndex.video].autoplay">autoplay:{{block.view.video[block.helper.currentIndex.video].autoplay}}</button>
									<button
										@click="block.view.video[block.helper.currentIndex.video].loop=!block.view.video[block.helper.currentIndex.video].loop">loop:{{block.view.video[block.helper.currentIndex.video].loop}}</button>
								</div>
								<div>
									<button
										@click="block.view.video[block.helper.currentIndex.video].muted=!block.view.video[block.helper.currentIndex.video].muted">muted:{{block.view.video[block.helper.currentIndex.video].muted}}</button>
									<button
										@click="block.view.video[block.helper.currentIndex.video].controls=!block.view.video[block.helper.currentIndex.video].controls">controls:{{block.view.video[block.helper.currentIndex.video].controls}}</button>
									<button
										@click="block.view.video[block.helper.currentIndex.video].playsinline=!block.view.video[block.helper.currentIndex.video].playsinline">playsinline:{{block.view.video[block.helper.currentIndex.video].playsinline}}</button>
								</div>
								<div>
									<input class="positionVideo" style="width:200px;" type="text"
										@keydown="changePosition($event,block.view.video[block.helper.currentIndex.video])"
										placeholder="awds,fthg,jilk,上下左右控制方向" />
									<button
										@click="deleteCurrent(block,block.helper.currentIndex.video,'video')">删除当前Video</button>
								</div>
							</div>
						</div>
					</div>
					<img
						:src="`images/${mainOptions.productName}_${block.id.toString().padStart(2,0)}.${mainOptions.imageExtension}`" />
					<p v-for="(paragraph,paragraphIndex) in block.view.p" :key="paragraph.id" :data-id="paragraph.id"
						:class="getClass(paragraph)" :style="getPStyle(paragraph)" v-html="paragraph.htmlContent"
						draggable="true" @mousedown="tagMove(block,paragraphIndex,'p',$event);block.view.p[paragraphIndex].using = true;" 
						@dragend="tagMoveEnd(paragraph,block,'p',$event)" @mouseup="helperPositionFocus(block,'p')"></p>
					 <a v-for="(link,linkIndex) in block.view.a" :key="link.id" :class="getClass(link)" :style="getAStyle(link)" 
						v-html="link.htmlContent" draggable="true" @mousedown="tagMove(block,linkIndex,'a',$event);" 
						@dragend="tagMoveEnd(link,block,'a',$event)" @mouseup="helperPositionFocus(block,'a')"></a>
					 <video v-for="(video,videoIndex) in block.view.video" :key="video.id" :autoplay="video.autoplay"
							:loop="video.loop" :data-muted="video.muted" :playsinline="video.playsinline" :controls="video.controls" 
							:style="getVideoStyle(video)" draggable="true" @mousedown="tagMove(block,videoIndex,'video',$event);" 
							@dragend="tagMoveEnd(video,block,'video',$event)" @mouseup="helperPositionFocus(block,'video')">
						 <source :src="video.src" :type="video.type">
					 </video>
				</div>
			</div>

			<button @click="exportHTML()">导出</button>
		</div>

		<div v-if="exporting">
			<button @click="exporting = false;">返回</button>

			<div :id="mainOptions.productName+'-main'" style="width:100%;overflow:hidden;" ref="output">
				<v-style>{{getGlobalStyle}}</v-style>
				<div class="block" v-for="block in mainContent" :key="block.id+'1'">
					<img
						:src="`images/${mainOptions.productName}_${block.id.toString().padStart(2,0)}.${mainOptions.imageExtension}`" />
					<p v-for="(paragraph,paragraphIndex) in block.view.p" :key="paragraph.id"
						:class="getClass(paragraph)" :style="getPStyle(paragraph)" v-html="paragraph.htmlContent"></p>
					<a v-for="(link,linkIndex) in block.view.a" :key="link.id" :href="link.href" :target="link.target"
						:class="getClass(link)" :style="getAStyle(link)" v-html="link.htmlContent"></a>
					<video v-for="(video,videoIndex) in block.view.video" :key="video.id" :autoplay="video.autoplay"
						:loop="video.loop" :data-muted="video.muted" :playsinline="video.playsinline"
						:controls="video.controls" :style="getVideoStyle(video)">
						<source :src="video.src" :type="video.type">
					</video>
				</div>
			</div>

			<button @click="download()">下载</button>
			<a style="visibility:hidden;" id="blob" :href="downloadURL"
				:download="mainOptions.productName+'.html'">下载链接</a>
		</div>
	</div>


	<script src="./js/vue-2.6.11.min.js"></script>
	<script src="./js/logic.js"></script>
</body>

</html>